import React from "react";
import {Button, Form, Input, message, Tabs} from 'antd';
import {LockOutlined, UserOutlined} from "@ant-design/icons";
import {updatePasswordFun} from "@/services/ant-design-pro/login";

/*
 * 组件名: ForgotPasswordForm
 * 组件用途: 重置密码表单
 * 创建日期: 2024/5/14
 */
const ForgotPasswordForm = (props) => {
  const onFinish = (values) => {
    if (values.password.length < 6) {
      message.error("密码长度至少6位")
      return;
    }
    // 密码必须同时包含数字和大小写字母
    if (!/[A-Z]/.test(values.password) || !/[a-z]/.test(values.password) || !/[0-9]/.test(values.password)) {
      message.error("密码必须同时包含数字和大小写字母")
      return;
    }
    // 两次密码必须一致
    if (values.password !== values.newPassword) {
      message.error("两次密码不一致")
      return;
    }

    updatePasswordFun(values.userName, values.newPassword).then(() => {
      message.success("更新密码成功,返回登录")
      props.updatePasswordStatus(false)
    })
  };

  return (
    <div className={"ant-pro-form-login-container"} style={{
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
      flex: "none",
      height: "auto"
    }}>

      <div className="ant-pro-form-login-header" style={{
        marginTop: "5%"
      }}>
        <span className="ant-pro-form-login-logo ">
          <img alt="logo" src="/logo.svg"/>
        </span>
        <span className="ant-pro-form-login-title ">
          用户管理中心
        </span>
      </div>

      <Tabs
        activeKey={"account"}
        centered
        items={[
          {
            key: 'account',
            label: '重置密码',
          },
        ]}
      />

      <Form
        name="basic"
        style={{
          width: 328
        }}
        initialValues={{
          remember: false,
        }}
        layout="vertical"
        onFinish={onFinish}
        autoComplete="off"
      >
        <Form.Item
          label=""
          name="userName"
          rules={[
            {
              required: true,
              message: '请输入用户名',
            },
          ]}

        >
          <Input
            size={'large'}
            prefix={
              <UserOutlined/>
            }
            placeholder="请输入用户名"/>
        </Form.Item>

        <Form.Item
          label=""
          name="password"
          rules={[
            {
              required: true,
              message: '请输入密码!',
            },
          ]}
        >
          <Input.Password size={'large'} prefix={<LockOutlined/>} placeholder="请输入密码"/>
        </Form.Item>

        <Form.Item
          label=""
          name="newPassword"
          rules={[
            {
              required: true,
              message: '请确认密码!',
            },
          ]}
        >
          <Input.Password size={'large'} prefix={<LockOutlined/>} placeholder="请确认密码"/>
        </Form.Item>

        <div
          style={{
            marginBottom: 24,
          }}
        >
          <a
            style={{
              float: 'right',
              marginBottom: 20
            }}
            onClick={() => props.updatePasswordStatus(false)}
          >
            返回登录
          </a>
        </div>

        <Button type="primary" htmlType="submit" size="large" block>
          确认
        </Button>
      </Form>
    </div>
  );
};

export default ForgotPasswordForm;

